import { memo } from 'react';
import { PulseLoader } from 'react-spinners';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { observer } from 'mobx-react-lite';
import store from '@/store';

import { Space, Spin } from 'antd';
import { Bubble } from '@ant-design/x';
import RobotIcon from '@/view/home/component/MessageHistory/RobotMessage/RobotIcon';

import { RobotMessageProps, ResumeOption } from '../type';

export const TextContent = memo((props: { content: string }) => {
    return props.content;
});

export const ResumeContent = memo(
    observer((props: { result: Array<ResumeOption> }) => {
        const { resume } = store.useStore();

        const openResumeDetail = (item: ResumeOption) => {
            resume.openResumeDetailModal(item.talent_id, item.resume_name);
        };

        return (
            <section>
                <span>好的，根据您的描述，已为您找到以下匹配的人才：</span>
                <section className="mt-2">
                    {props.result.map((item) => (
                        <section key={item.talent_id}>
                            <span
                                onClick={() => openResumeDetail(item)}
                                className="leading-6 cursor-pointer text-link font-normal hover:underline"
                            >
                                {item.resume_name}
                            </span>
                        </section>
                    ))}
                </section>
            </section>
        );
    })
);

export default memo(function (props: RobotMessageProps) {
    const isResumeResult = (result: string): false | Array<ResumeOption> => {
        try {
            const jsonResult = JSON.parse(result);
            const firstItem = jsonResult[0];
            return Array.isArray(jsonResult) &&
                firstItem?.talent_id &&
                firstItem?.resume_name
                ? jsonResult
                : false;
        } catch (e) {
            return false;
        }
    };

    const viewResult = useMemoizedFn(() => {
        const result = props.result;
        if (typeof result !== 'string') return '';

        const resumeResult = isResumeResult(result);
        if (resumeResult) return <ResumeContent result={resumeResult} />;
        else return <TextContent content={result} />;
    });

    return (
        <>
            <Bubble
                placement="start"
                className={`w-full`}
                loading={props.status === 'loading'}
                loadingRender={() =>
                    props.status === 'loading' ? (
                        <Space>
                            <span>
                                {(props?.result as string) || '正在思考中...'}
                            </span>
                            {props.result ? (
                                <PulseLoader color={'#1677ff'} size={8} />
                            ) : (
                                <Spin size="small" />
                            )}
                        </Space>
                    ) : (
                        <></>
                    )
                }
                content={viewResult()}
                avatar={<RobotIcon />}
            />
        </>
    );
});
